import React, { Component } from 'react'


class Content extends Component {
    state = {
        msg: '你好世界'
    }
    render(){
        return (<h1>{this.state.msg}</h1>)
    }
}


function Footer(){
    return (<h1>页脚部分</h1>)
}

export default class App extends Component {
    
    divRef = React.createRef()
  
    contentRef = React.createRef()
    
    footerRef = React.createRef()

    render() {
    return (
      <div>

        {/* 将 ref 添加在 html 标签上, 可以获取到对应的元素 */}
        <div ref={this.divRef}>App</div>

        {/* 将 ref 添加在类组件上的时候，可以获取到组件的实例 */}
        <Content ref={this.contentRef} />

        {/* 对于函数式组件而言，使用 ref 需要用 forwardRef 进行包裹 */}
        {/* 函数式组件无法直接使用 ref */}
        <Footer ref={this.footerRef} />

        <button onClick={()=>{

            console.log(this.divRef.current);

            console.log(this.contentRef.current);

            // 在类组件中，父组件可以通过 ref 获取到子组件，且修改子组件的内容
            this.contentRef.current.setState({
                msg: '我们总说来日方长，却忘了世事无常。'
            })

            // 因为组件是函数式组件，而且没有做 forwardRef 处理
            // 所以这里无法获取到对应的组件
            console.log(this.footerRef.current);

        }}> 获取 ref 值 </button>
      </div>
    )
  }
}
